<template>
 <lay-layout class="Pop">

  <lay-body class="flexrow">
    <lay-row :space="10" class="QueryRow"> 
      <lay-col :md="24">
        <lay-card>
        <lay-form style="margin-top: 5px">
            <lay-row>
              <lay-col :md="16">
                <lay-form-item label="关键字：" label-width="60">
                  <lay-input
                    v-model="qm.key" style="width: 90%" placeholder=" 页面代码、页面名称"
                    :allow-clear="true"
                  ></lay-input>
                </lay-form-item>
              </lay-col>
              
              

              <lay-col :md="6">
                <lay-form-item label-width="0">
                  <lay-button type="primary" @click="toSearch">查询</lay-button>
                  <lay-button @click="toReset">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <lay-table
            
            :page="page"
            :columns="columns"
            :dataSource="dataSource"
            :default-toolbar="defaultToolbar"
            v-model:selectedKey="selectedKey" 
            :rowClassName="rowClassName"

            even
            @row="rowClick"
            @rowDouble="rowDoubleClick"
            @Change="pageChange"
            @sortChange="sortChange"
          >
            <template v-slot:toolbar>
              <lay-row>
                <lay-col :md="18">
                  
                  <!--<lay-button size="sm">删除</lay-button> -->
                </lay-col>
                <lay-col style="text-align:right;">
                   
              
                </lay-col>
              </lay-row>
              
            </template>
            <template v-slot:imgurl="{ data }"> 
              <lay-icon :type="data.imgurl"></lay-icon>
            </template>
             
            <template v-slot:operator="{}">
             
            </template>
           
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
       
  </lay-body>
    <lay-footer>
     
      <lay-button size="sm" type="primary" @click="toSubmit"
            >保存</lay-button
          >
          <lay-button size="sm" @click="toCancel" style="margin-left:40px;">取消</lay-button>
    </lay-footer>
  </lay-layout>

</template>

<script lang="ts">
import { ref, watch,reactive,onMounted } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import MyData from "../../library/MyData"; 
import { number } from 'echarts';

export default {
  props:{
      data:Object
  },

  setup(prop:any, context:any) {
    const baseUrl="/htpage";
    const myWin=ref<any>(null);
    const selectedKeys = ref(['1']) 
    const defaultToolbar = ref(false)
    const page = ref(  new MyPage()  ); 
    const selectedKey = ref<any>("") 

    const columns = [
      {
        title: '选择',
        width: '50px',
        type: 'radio',
        fixed: 'left'
      },
      {
        title: '序号',
        width: '50px' ,
        key: 'rowNo'
      },
      { key:'code',title: '页面代码', width: '100px',sort:"asc" },
{ key:'name',title: '页面名称', width: '100px',sort:"asc"},
{ key:'imgurl',title: '图标', width: '100px',sort:"asc" ,customSlot: 'imgurl',},
{ key:'lx',title: '类型', width: '100px',sort:"asc" },
{ key:'edtDt',title: '修改日期', width: '100px',sort:"asc" },
 
    ]

    const dataSource = ref([]);

    const rowClick = function (data: any) {
        selectedKey.value=data.id;
    }

    const rowDoubleClick = function (data: any) {
        toSubmit();
    }

    const pageChange = function ({ current, limit }: any) {
      if(qm.pageSize!=limit)
      {
        qm.pageSize=limit ;
        qm.page=1;
        query(1); 
      }else{
        query(current)
      }
      

    }
    function toSearch() { 
      query(1);
    }
     
    function toReset() {
      qm.key= '';
      qm.dtb='';
      qm.dte='';       
    }

    const qm=reactive({
      key:"",
      dtb:"",
      dte:"", 
      page: 1,
      pageSize: 10,
      sortFields:"edtDt desc"
    }); 
    const query=async (pageIndex:number) =>{
      selectedKey.value="";
      if(pageIndex){
        page.value.current=pageIndex;
        qm.page=pageIndex;
      }
      var r=await new MyHttp().page(baseUrl+"/page",qm,
        { 
        },
        columns
      ); 
 

      dataSource.value=r.data.records;  
      page.value.total=r.data.totalRow;

       
    }
     
    const sortChange = (key: any, sort: number) => {
      qm.sortFields=`${key} ${sort}`;
      query(0);
    }
    const tableExport=async()=>{
      let url=baseUrl+"/page";
      let name="HTAction";
      var cols=columns as Array<TableColumn>;
      new MySimpleExport().exportExcel(
        {
          qm,
          url,
          name,
          columns:cols
        }
        );
    }
    


    const toSubmit=async()=>{
      if(!selectedKey.value){
        return;
      } 
      context.emit("ok",MyData.getById(dataSource.value,selectedKey.value));  
      myWin.value.close();
    } 
    const toCancel=()=>{   
      context.emit("cancel");  
      myWin.value.close();
    }
     
 
    const rowClassName=(row:any, rowIndex:number):string=>{
      if(row.id==selectedKey.value){ 
        return "RowSelected";        //
      }
      else{
        return "";
      }
    }
    onMounted(() =>{  
      myWin.value=new MyWin();
      query(1);
    });
    return {
      columns,
      dataSource,
      selectedKeys, 
      defaultToolbar,
      page,
      rowClick,
      rowDoubleClick,
      pageChange,
      toReset,
      toSearch,
       

      qm,
      query,
      
      sortChange,
      tableExport,
    
      myWin,
      

      toSubmit,
      toCancel,
 
      selectedKey,
      rowClassName
    }
  }
}
</script>
<style scoped>
.Pop .layui-footer,
.Pop .layui-header {
  height: 50px;
  text-align: center; 
  padding-top:10px;
}  
.Pop .layui-body{
  justify-content:start;
}
.MainForm{
  margin: 0px;
  width:95%;
}  

.QueryRow {
   margin: 0px;
}
.PopCard .layui-card-body{
  margin: 0px;
}
.layui-form-item{
  margin: 0px !important;
}
</style>